<template>
    <div id="app">
    <header>
        <van-nav-bar title="防疫商城">
            <template #left>
                <van-icon name="arrow-left" size="18"  @click="back"/>
            </template>
        </van-nav-bar>
    </header>

    <main>
    <div class="search">
        <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        </van-dropdown-menu>
        <van-search v-model="value" placeholder="请输入搜索关键词" @focus="search" />
    </div>

        <van-dropdown-menu>
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
        <van-dropdown-item v-model="value4" :options="option4" />
        </van-dropdown-menu>
      
        <van-grid :border="false" :column-num="2">

        <van-grid-item v-for="(item,index) in list">
            <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            <p>{{item.name}}</p>
            <div class="box">
                <p>月售{{item.monthSales}}</p><p>库存{{item.inventory}}</p>
            </div>
            <div class="price">
            <p>{{item.price}}</p>
            <van-button plain type="info" size="mini">{{item.discounts}}</van-button>
            <van-button round type="info" size="small">{{item.purchase}}</van-button>
            </div>
            <div class="store">
                <p>{{item.store}}</p>
                <p>{{item.distance}}</p>
            </div> 
        </van-grid-item>

        </van-grid>
    </main> 
    </div>
</template>

<script>
import router from '@/router';

   export default {
    data() {
        return {
            value: '',
            value1: 0,
            value2: "a",
            value3: "A",
            value4: "z",
            option1: [
                { text: '北京市', value: 0 },
                { text: '南京市', value: 1 },
                { text: '上海市', value: 2 },
            ],
            option2: [
                { text: '全部', value: "a" },
            ],
            option3: [
                { text: '附近', value: "A" },
            ],
            option4: [
                { text: '智能筛选', value: "z" },
            ],
            list:[
                {
                    name:"[九信],一次性使用医用口罩,灭菌级 10只/包",
                    monthSales:"999",
                    inventory:"999",
                    price:"￥9.90",
                    discounts:"领10元券",
                    purchase:"购买",
                    store:"养生堂大药房(上庄店)",
                    distance:"999m",
                    id:1
                },
                {
                    name:"[九信],一次性使用医用口罩,灭菌级 10只/包",
                    monthSales:"999",
                    inventory:"999",
                    price:"￥9.90",
                    discounts:"领10元券",
                    purchase:"购买",
                    store:"养生堂大药房(上庄店)",
                    distance:"999m",
                    id:2
                },
                {
                    name:"[九信],一次性使用医用口罩,灭菌级 10只/包",
                    monthSales:"999",
                    inventory:"999",
                    price:"￥9.90",
                    discounts:"领10元券",
                    purchase:"购买",
                    store:"养生堂大药房(上庄店)",
                    distance:"999m",
                    id:3
                },
                {
                    name:"[九信],一次性使用医用口罩,灭菌级 10只/包",
                    monthSales:"999",
                    inventory:"999",
                    price:"￥9.90",
                    discounts:"领10元券",
                    purchase:"购买",
                    store:"养生堂大药房(上庄店)",
                    distance:"999m",
                    id:4
                }
            ]
        }
    },
    methods: {
        search(){
            this.$router.push("/search")
        },
        back(){
            this.$router.go(-1)
        }
    }
   }
</script>

<style scoped lang="less">
    p{
        margin: 0;
    }
    main{
        .search{
            display: flex;
            padding: 10px;
            .van-search{
                .van-search__content{
                    width: 280px;
                }
            }
        }
        .van-grid{
            .van-grid-item{
                .van-grid-item__content{
                    p:nth-of-type(1){
                        margin: 4px 0 ;
                    }
                    .box{
                        width: 100%;
                        display: flex;
                        font-size: 14px;
                        color:#666666;
                        align-items: center;
                        p:nth-of-type(1){
                        margin-right: 20px;
                        }
                    }
                    .price{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      
                        p{
                            color:red;
                            font-size: 20px;
                        }
                    }
                    .store{
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        p{
                            font-size: 14px;
                            color: #666666;
                        }
                    }
                }
            }
        }

    }

</style>